<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>画表格</title>
</head>
<body>
<canvas id="a_canvas" width="300" height="300"></canvas>

<script type="text/javascript">
    (function (){

        window.addEventListener("load", function(){

            // 获取上下文
            var a_canvas = document.getElementById('a_canvas');
            var context = a_canvas.getContext("2d");


            // 绘制背景
            var gradient = context.createLinearGradient(0,0,0,300);


            gradient.addColorStop(0,"#e0e0e0");
            gradient.addColorStop(1,"#ffffff");


            context.fillStyle = gradient;

            context.fillRect(0,0,a_canvas.width,a_canvas.height);


            // 描绘边框
            var grid_cols = 10;
            var grid_rows = 10;
            var cell_height = a_canvas.height / grid_rows;
            var cell_width = a_canvas.width / grid_cols;
            context.lineWidth = 1;
            context.strokeStyle = "#a0a0a0";

            // 结束边框描绘
            context.beginPath();
            // 准备画横线
            for (var col = 0; col <= grid_cols; col++) {
                var x = col * cell_width;
                context.moveTo(x,0);
                context.lineTo(x,a_canvas.height);
            }
            // 准备画竖线
            for(var row = 0; row <= grid_rows; row++){
                var y = row * cell_height;
                context.moveTo(0,y);
                context.lineTo(a_canvas.width, y);
            }
            context.stroke();
        },false);
    })();
</script>
</body>
</html>
